<template>
  <div class="app-container">
    <el-form :show-message="!($route.query.isInfo || isInfo)" ref="elForm"
      :disabled="($route.query.isInfo || isInfo) && !draft" :model="formData" :rules="rules" size="medium"
      label-width="120px">
      <h2 style="text-align: center">设备（工具）符合性确认</h2>
      <h4 class="form-header h4">基本信息</h4>
      <el-row :gutter="15">
        <el-col :span="8">
          <el-form-item label="设备名称" prop="deviceId">
            <el-select v-if="!($route.query.isInfo || isInfo)" filterable :disabled="$route.query.isEdit"
              v-model="formData.deviceId" placeholder="请选择设备名称" clearable @change="changeDevice"
              :style="{ width: '100%' }">
              <el-option v-for="(item, index) in deviceOptions" :key="index" :label="item.deviceName"
                :value="item.deviceId" :disabled="item.disabled">
                <span style="float: left">{{ item.deviceName }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{
                  item.deviceCode
                }}</span></el-option>
            </el-select>
            <el-input disabled v-else v-model="formData.deviceName" placeholder="请输入设备名称" clearable
              :style="{ width: '100%' }"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="设备编号" prop="deviceCode">
            <el-input disabled v-model="formData.deviceCode" placeholder="请输入设备编号" clearable :style="{ width: '100%' }">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="设备用途" prop="useInfo">
            <el-input disabled v-model="formData.useInfo" placeholder="请输入设备用途" clearable
              :style="{ width: '100%' }"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="保管部门" prop="deptId">
            <el-cascader disabled :props="{ value: 'id', checkStrictly: true }" :show-all-levels="false" ref="reference"
              placeholder="请选择保管部门" :style="{ width: '100%' }" v-model="formData.deptId"
              :options="deptOptions"></el-cascader>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="符合性确认相关技术依据" prop="accord">
            <el-input v-model="formData.accord" placeholder="请输入符合性确认相关技术依据" clearable
              :style="{ width: '100%' }"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="确认周期" prop="confirmPeriod">
            <el-input :disabled="$route.query.isEdit" v-model="formData.confirmPeriod" placeholder="请输入确认周期" clearable
              :style="{ width: '100%' }">
              <template slot="append">个月</template>
            </el-input>
            <!-- <el-date-picker
              type="month"
              :disabled="$route.query.isEdit"
              v-model="formData.confirmPeriod"
              format="yyyy-MM"
              value-format="yyyy-MM"
              :style="{ width: '100%' }"
              placeholder="请选择确认周期"
              clearable
            ></el-date-picker> -->
          </el-form-item>
        </el-col>
      </el-row>
      <el-row gutter="15">
        <el-col :span="8">
          <el-form-item label="设备类型" prop="deviceTypeValue">
            <el-select v-model="formData.deviceTypeValue" placeholder="请选择设备类型" clearable :style="{ width: '100%' }">
              <el-option v-for="dict in dict.type.sys_device_type" :key="dict.value" :label="dict.label"
                :value="dict.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="formData.deviceTypeValue != 2">
          <el-form-item label="分设备编号范围" prop="codeRange">
            <el-input v-model="formData.codeRange" placeholder="请输入分设备编号范围" clearable
              :style="{ width: '100%' }"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row gutter="15">
        <el-col :span="8">
          <el-form-item label="设备(工具)外观" prop="isAppearance">
            <el-radio-group v-model="formData.isAppearance" size="medium">
              <el-radio v-for="(item, index) in isAppearanceOptions" :key="index" :label="item.value.toString()"
                :disabled="item.disabled">{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="设备(工具)功能 " prop="isFunction">
            <el-radio-group v-model="formData.isFunction" size="medium">
              <el-radio v-for="(item, index) in isFunctionOptions" :key="index" :label="item.value.toString()"
                :disabled="item.disabled">{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col></el-row>
      <el-row gutter="15">
        <el-col :span="8">
          <el-form-item label="数据外观确认" prop="confirmAppearance">
            <el-radio-group v-model="formData.confirmAppearance" size="medium">
              <el-radio v-for="(item, index) in confirmAppearanceOptions" :key="index" :label="item.value.toString()"
                :disabled="item.disabled">{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="数据功能确认" prop="confirmFunction">
            <el-radio-group v-model="formData.confirmFunction" size="medium">
              <el-radio v-for="(item, index) in confirmFunctionOptions" :key="index" :label="item.value.toString()"
                :disabled="item.disabled">{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <h4 class="form-header h4">确认内容</h4>
      <el-form-item prop="confirmAppearance">
        <el-checkbox-group v-model="content">
          <div v-for="item in dict.type.sys_device_content">
            <el-checkbox v-if="item.value != 4" :label="item.value">{{
              item.label
            }}</el-checkbox>
            <el-checkbox v-else :label="item.value">
              <span v-for="(i, index) in item.label.split('###')">
                {{ i }}
                <el-input v-if="index == 0" v-model="param1" clearable :style="{ width: '200px' }">
                </el-input>
                <el-input v-if="index == 1" v-model="param2" clearable :style="{ width: '200px' }">
                </el-input>
              </span>
            </el-checkbox>
          </div>
        </el-checkbox-group>
      </el-form-item>
      <el-col :span="8">
        <el-form-item label="确认日期" prop="confirmTime">
          <el-date-picker v-model="formData.confirmTime" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
            :style="{ width: '100%' }" placeholder="请选择确认日期" clearable></el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :span="8" v-if="formData.time">
        <el-form-item label="上级审批日期" prop="time">
          <el-date-picker v-model="formData.time" format="yyyy-MM-dd" value-format="yyyy-MM-dd" :style="{ width: '100%' }"
            placeholder="暂无上级审批时间" clearable></el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :span="24" v-if="btnShow">
        <el-form-item label-width="0" style="text-align: center; margin-top: 30px">
          <el-button v-if="!($route.query.isInfo || isInfo)" type="primary" @click="submitForm(1)">提交</el-button>
          <el-button v-if="draft && ($store.state.user.id == $route.query.userId && formData.status == 'audit')"
            type="primary" @click="submitForm(1)">提交</el-button>
          <el-button v-if="!($route.query.isInfo || isInfo) && (formData.status == 'draft' || !formData.status)"
            type="primary" @click="submitForm(0)">暂存</el-button>
          <el-button :disabled="false" @click="resetForm">返回</el-button>
        </el-form-item>
      </el-col>
    </el-form>
  </div>
</template>

<script>
import { deptTreeSelect } from "@/api/system/user.js";
import { listSelect } from "@/api/device/device.js";
import {
  deviceConfirmAdd,
  updategdeviceConfirm,
  deviceConfirmInfo,
} from "@/api/device/deviceConfirm.js";
export default {
  components: {},
  dicts: ["sys_device_type", "sys_device_content"],
  props: {
    isInfo: {
      type: Boolean,
      default: false,
    },
    id: {
      type: String,
      default: "",
    },
    btnShow: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      content: ['0', '1'],
      param1: "",
      param2: "",
      formData: {
        contentBoList: [],
        remark: undefined,
        deviceCode: undefined,
        deviceId: undefined,
        useInfo: undefined,
        num: undefined,
        code: undefined,
        deviceTypeValue: undefined,
        confirmPeriod: null,
        checkDate: null,
        isAppearance: "0",
        isFunction: "0",
        confirmAppearance: "0",
        confirmFunction: "0",
        isAgreement: "0",
        deptId: undefined,
        accord: undefined,
        codeRange: undefined,
      },
      deptOptions: [],
      draft: false,
      rules: {
        accord: [
          {
            required: true,
            message: "请输入符合性确认相关技术依据",
            trigger: "blur",
          },
        ],
        codeRange: [
          {
            required: false,
            message: "请输入分设备编号范围",
            trigger: "blur",
          },
        ],
        deptId: [
          {
            required: true,
            message: "请选择部门设备名称",
            trigger: "blur",
          },
        ],
        deviceId: [
          {
            required: true,
            message: "请输入设备名称",
            trigger: "blur",
          },
        ],
        deviceCode: [
          {
            required: true,
            message: "请输入设备编号",
            trigger: "blur",
          },
        ],

        useInfo: [
          {
            required: true,
            message: "请输入设备用途",
            trigger: "blur",
          },
        ],
        remark: [
          {
            required: true,
            message: "其他说明不能为空",
            trigger: "blur",
          },
        ],
        num: [
          {
            required: true,
            message: "设备数量",
            trigger: "blur",
          },
        ],
        code: [
          {
            required: true,
            message: "请输入出厂编号",
            trigger: "blur",
          },
        ],
        deviceTypeValue: [
          {
            required: true,
            message: "请选择设备类型",
            trigger: "change",
          },
        ],
        confirmPeriod: [
          {
            required: true,
            message: "请输入确认周期",
            trigger: "change",
          },
        ],
        checkDate: [
          {
            required: true,
            message: "请选择验收日期",
            trigger: "change",
          },
        ],
        isAppearance: [
          {
            required: true,
            message: "设备(工具) 外观不能为空",
            trigger: "change",
          },
        ],
        isFunction: [
          {
            required: true,
            message: "设备(工具)功能 不能为空",
            trigger: "change",
          },
        ],
        confirmAppearance: [
          {
            required: true,
            message: "数据外观确认不能为空",
            trigger: "change",
          },
        ],
        confirmFunction: [
          {
            required: true,
            message: "数据功能确认不能为空",
            trigger: "change",
          },
        ],
        isAgreement: [
          {
            required: true,
            message: "合同情况不能为空",
            trigger: "change",
          },
        ],
      },
      isAppearanceOptions: [
        {
          label: "是",
          value: 0,
        },
        {
          label: "否",
          value: 1,
        },
      ],
      isFunctionOptions: [
        {
          label: "是",
          value: 0,
        },
        {
          label: "否",
          value: 1,
        },
      ],
      confirmAppearanceOptions: [
        {
          label: "是",
          value: 0,
        },
        {
          label: "否",
          value: 1,
        },
      ],
      confirmFunctionOptions: [
        {
          label: "是",
          value: 0,
        },
        {
          label: "否",
          value: 1,
        },
      ],
      deviceOptions: [],
    };
  },
  computed: {},
  created() {
    this.listSelect();
    if (this.$route.query.isEdit || this.$route.query.isInfo || this.isInfo) {
      this.getinfo();
      this.draft = this.$route.query.draft
      console.log(this.$route.query.draft);
    }
    this.getDeptTree();
  },
  mounted() { },
  methods: {
    /** 查询部门下拉树结构 */
    getDeptTree() {
      deptTreeSelect().then((response) => {
        this.deptOptions = response.data;
      });
    },
    changeDevice(i) {
      let row = this.deviceOptions.find((e) => e.deviceId == i);
      if (row) {
        this.formData.deviceCode = row.deviceCode;
        this.formData.deviceName = row.deviceName;
        this.formData.useInfo = row.useInfo;
        this.formData.deptId = row.deptId;
        this.formData.deptName = row.deptName;
      } else {
        this.formData.deviceName = undefined;

        this.formData.deviceCode = undefined;
        this.formData.useInfo = undefined;
        this.formData.deptId = undefined;
        this.formData.deptName = undefined;
      }
      console.log(this.formData.deptId);
    },
    listSelect() {
      listSelect({ status: 0, busStatus: 1, managerUserId: this.$store.state.user.id }).then((response) => {
        this.deviceOptions = response.data;
      });
    },
    getinfo() {
      return deviceConfirmInfo(this.$route.query.id || this.id).then(
        (response) => {
          this.formData = response.data;
          this.content = this.formData.contentList
            .filter((i) => i.isSelected == 0)
            .map((e) => e.contentValue);
          this.formData.contentBoList = this.formData.contentList;
          this.formData.contentBoList.forEach((e) => {
            if (e.contentValue == 4) {
              this.param1 = e.param1;
              this.param2 = e.param2;
            }
          });
          this.formData.time = this.formData.wfDetailVo.historyProcNodeList[1].commentList[0].time
          if ((this.$store.state.user.id == this.$route.query.userId && this.formData.status == 'audit')) {
            console.log('////');
            // 可以编辑
            this.disabledEdit = false
            this.value = 1
            console.log(this.disabledEdit);
          }
        }
      );
      console.log(this.content);
    },
    submitForm(e) {
      console.log(this.content);
      let query = JSON.parse(JSON.stringify(this.formData));
      if (query.status == 'draft' || !query.status) {
        query.status = e == 0 ? 'draft' : 'audit'
      }
      console.log(query.status, 'query.status ');
      if (e == 0 && !this.formData.deviceConfirmId) {
        if (!this.formData.deviceId) {
          this.$message.warning("请先选择设备名称");
          return;
        }
        deviceConfirmAdd(query).then((response) => {
          this.$modal.msgSuccess("新增成功");
          this.resetForm();
        });
        return
      }
      this.$refs["elForm"].validate((valid) => {
        if (valid) {
          if (this.content.includes("4") && (!this.param1 || !this.param2)) {
            this.$message.warning("请输入功能");
            return;
          }
          //let query = JSON.parse(JSON.stringify(this.formData));
          //query.status = e == 0 ? 'draft' : 'audit'
          if (this.formData.contentBoList.length) {
            // 是编辑的
            query.contentBoList.forEach((i) => {
              i.isSelected = this.content.includes(i.contentValue) ? 0 : 1;
              i.param1 = this.param1;
              i.param2 = this.param2;
            });
          } else {
            // 新增
            let list = this.dict.type.sys_device_content.map((i) => {
              return {
                param1: this.param1,
                param2: this.param2,
                isSelected: this.content.includes(i.value) ? 0 : 1,
                contentValue: i.value,
                contentLabel: i.label,
              };
            });
            console.log(list);
            query.contentBoList = list;
          }

          query.deptId = this.$refs.reference.getCheckedNodes()[0].value;
          query.deptName = this.$refs.reference.getCheckedNodes()[0].label;
          if (this.formData.deviceConfirmId != undefined) {
            updategdeviceConfirm(query).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.resetForm();
            });
          } else {
            deviceConfirmAdd(query).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.resetForm();
            });
          }
        }
      });
    },
    resetForm() {
      this.$tab.closeOpenPage();
    },
  },
};
</script>
